<template>

    <div class="common-layout">
        <el-container>
            <el-aside class="admin-menu">
                <!-- <AppMenu /> -->

                <el-menu class="cloud-el-menu" @open="handleOpen" @close="handleClose" router>
                    <template v-for="(item, i) in routers">
                        <!-- 有二级菜单，且二级菜单的个数大于 1 -->
                        <!-- 有多个（大于 1）二级菜单时，index 无意义，只要唯一就行 -->
                        <el-sub-menu :index="i + ''" :key="i" v-if="childrenLength(item.children) > 1 && item.meta?.hide !== true">
                        <template #title>
                            <el-icon v-if="item.meta?.icon">
                            <component :is="item.meta?.icon"/>
                            </el-icon>
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item v-for="children in item.children" :key="children.path" :index="children.path" @click="menuItem">{{children.name}}</el-menu-item>
                        </el-sub-menu>

                        <!-- 无二级菜单，或二级菜单的个数小于等于 1 -->
                        <el-menu-item :index="menuItemPath(item)" :key="menuItemPath(item)" v-if="childrenLength(item.children) <= 1 && item.meta?.hide !== true" @click="menuItem">
                        <el-tooltip class="box-item" effect="dark" :disabled="!isCollapse" content="item.name" placement="right">
                            <el-icon v-if="item.meta?.icon">
                            <component :is="item.meta?.icon"/>
                            </el-icon>
                        </el-tooltip>
                        <span>{{item.name}}</span>
                        </el-menu-item>

                    </template>
                </el-menu>

            </el-aside>
            <el-container>
                <el-header class="admin-header">
                    <el-col :span="2">
                    </el-col>
                    <el-col :span="16">后台管理系统</el-col>
                    <el-col :span="6">
                        <el-button type="info" round @click="logout">登出</el-button>
                    </el-col>
                </el-header>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script>
import router from '@/router';
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Expand, Fold, Menu } from '@element-plus/icons-vue'
import AppMenu from './components/AppMenu.vue'
import manageRouter from '@/router/managerRouter'
export default {
    components: {
        Expand,
        Fold,
        Menu,
        AppMenu
    },
    setup() {

        const router = useRouter()
        const menus = reactive([
            {
                id: '1',
                path: '/setting',
                title: '系统设置',
            },
            // {
            //     id: '2',
            //     icon: '',
            //     title: '系统设置',
            //     router: '',
            //     Subclass: [
            //         {
            //             id: '2-1',
            //             path: '/home1',
            //             title: '人员管理',
            //             router: ''
            //         },
            //         {
            //             id: '2-2',
            //             path: '/home2',
            //             title: '角色管理',
            //             router: ''
            //         },
            //         {
            //             id: '2-3',
            //             path: '/home3',
            //             title: '资源管理',
            //             router: ''
            //         },
            //     ]  // 二级菜单
            // },
            {
                id: '3',
                path: '/useInfo',
                title: '使用说明'
            },
        ])

        const activeIndex = ref('1')
        const routers = reactive(manageRouter)

        const select = (index, path) => {
            console.log(index)
            console.log(path)
            localStorage.setItem('menuid', JSON.stringify(index))
        }

        onMounted(() => {
            //console.log(router.getRoutes())
            activeIndex.value = JSON.parse(localStorage.getItem('menuid'))
        })

        const logout = () => {
            localStorage.clear()
            router.push('/login')
        }

        const menuCollapse = () => {
            isCollapse.value = !isCollapse.value
            console.log(!isCollapse.value)
        }

        const childrenLength = (children) => {
            debugger
            if (children == null) {
                return 0
            } else {
                return children.length
            }
        }

        const menuItemPath = (item) => {
            if (item.children == null) {
                return item.path
            } else {
                return item.children[0].path
            }
        }

        const isCollapse = ref(false)
        return { menus, activeIndex, routers, select, logout, isCollapse, menuCollapse, childrenLength, menuItemPath }
    }
}
</script>

<style lang="scss" scoped>
.admin-menu {
    background-color: #191a23;
    height: 100vh;
    width: 270px;
    .logo {
        height: 50px;
        align-items: center;
        justify-content: center;
        display: flex;
        background-color: #191a23;
        color: var(--ea-aside-text-color);
    }
}
.el-menu {
    border-right: 0px;
}
.admin-header {
    padding: 0;
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    text-align: center;

    div:nth-child(1) {
        height: 55px;
        cursor: pointer;
        text-align: left;
        padding-left: 8px;
        .el-icon {
            font-size: 24px;
        }
        
    }

    div:nth-child(2) {}

    div:nth-child(3) {
        text-align: right;
        padding-right: 15px;
    }
}
</style>